import React from 'react'
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
// ===================================================================== Temp
import FormModal from '#cpt/temp/FormModal'
// ===================================================================== global declare
const { $fn, $http } = window
// ===================================================================== data
const BoolStatus = [{ name:'是', value: '1' }, { name:'否', value:'0' }]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		files: [],
		fileList:[],
		formData:[
			{ label: '文件夹', 	name: 'folder_id',	type:'treeSelect',	full:true,  checkable:false, multiple:false, loading:true, required:true },
			{ label:'公共文件',	name: 'is_public', 	type: 'radio', 		full:true, 	value:'1',	data:BoolStatus },
		]
	}
	submit = {}
	open = (id)=> {
		this.id = id ?? false
		this.getModalSelect()
		this.formRef.setValue({is_public:'1'})
		this.modal.open({formRef: this.formRef})
		this.setState({files:[]})
	}
	
	// 弹窗获取下拉数据
	getModalSelect = async () => {
		const { formData } = this.state
		$http.pull(null,'doc-file-folder/folderLists').then((data)=>{
			$fn.setRow( formData, 'folder_id', data )
			this.id && this.formRef.setValue({folder_id:this.id})
			this.setState({ formData })
		})
	}
	onUpload = ({ file, fileList }) => {
		const status = file.status
		this.setState({fileList})
		if(status === 'done'){
			const { data, msg, code } = file.response
			if(+code === 200){
				$fn.msg.success('文件上传成功')
			}else{
				if($fn.hasArray(data)){
					let txt = []
					data.forEach((v,i)=>{
						txt.push(<div key={i}>{v}</div>) 
					})
					 $fn.msg.error(txt)
				}else{
					 $fn.msg.error(msg)
				}
				fileList.pop()
				this.setState({fileList})
			}
			this.getfiles(fileList)
		}else if(status ==='removed'){
			this.getfiles(fileList)
		}
	}
	getfiles = (fileList) => {
		if($fn.hasArray(fileList)){
			let arr = []
			fileList.forEach(v=>{
				const {response:{data}} = v
				arr.push(data[0])			
			})
			this.setState({files:arr})
		}else{
			this.setState({files:[]})
		}
	}
	render(){
		const headers = {
			Authorization: 'Bearer ' + window.$fn.getToken(),
			'Async-Debug': window.$fn.longSave('async') || 0
		}
		return FormModal.call(this,{ title:'上传文件', labelWidth:'s4', width:600, height:'70%', scroll:true, api:'doc-file-list/uploadSubmit',
			okDisabled:!$fn.hasArray(this.state.files), 
			close:()=>this.setState({ files:[], fileList:[] }),
			onRefresh:()=>{
				if(this.id) this.props.onRefresh()
			},
			getSubmit:(param)=>{
				param.files = this.state.files
				return param
			},
			suffix:(
				<Upload
					name='files'
					action={window.globalConfig.api + 'doc-file-list/upload'} 
					headers={headers} 
					onChange={this.onUpload}
					fileList={this.state.fileList}
				>
					<Button icon={<UploadOutlined />}>上传</Button>
				</Upload>
			)
		})
	}
}

export default Index